<template>
  <div id="allType">
    <ul>
      <li v-for="item in allType" :key="item.id" @click="goTypeDetail(item)">
          <img :src="item.icon" alt="">
          <p>{{item.name}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "wgy-AllTpye",
  props:{
      allType:{
          type:Array,
          default:() => {
              return []
          }
      }
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    // 点击去分类详情
    goTypeDetail(obj){
      this.$router.push({
        path:'typeDetail',
        query:{
          obj
        }
      })
    }
  },
  //组件挂载
  components: {},
  //计算属性
  computed: {},
  //过滤器
  filters: {},
};
</script>

<style lang="scss" scoped>
#allType{

ul{
    margin-top: .4rem;
    width: 100%;
    padding: 0 .12rem;
    display: flex;
    justify-content: space-between;
    text-align: center;
    flex-wrap: wrap;
    li{
        width: 30.33%;
        height: 1.8rem;
        margin-top: .2rem;
        font-size: .26rem;
        img{
            width: 100%;
            height: 70%;
        }
        p{
            line-height: .4rem;
        }
    }
}
}

</style>
